<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Expires" content="0">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-Control" content="no-cache">
	<title>用户管理</title>
	<link rel="stylesheet" href="css/jquery-ui.min.css" />
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/bootstrap-table.min.css" />
	<link rel="stylesheet" href="css/bootstrapValidator.min.css" />
	<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" />
	<link rel="stylesheet" href="pagecss/page.css" />
	<script type="text/javascript" src="js/jquery-3.7.0.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/bootstrap-table.min.js"></script>
	<script type="text/javascript" src="js/bootstrap-table-zh_CN.js"></script>
	<script type="text/javascript" src="js/bootstrapValidator.js"></script>
	<script type="text/javascript" src="js/bootstrapValidator-zh_CN.js"></script>
	<script type="text/javascript" src="js/bootstrapValidator-rock.js"></script>
	<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="js/bootstrap-datetimepicker-zh_CN.js"></script>
	<script type="text/javascript" src="js/rockjs-1.0.js"></script>
	<script type="text/javascript" src="pagejs/common.js"></script>
	<script type="text/javascript" src="pagejs/user.js"></script>
</head>

<body>
	<div class="container" style="width:100%;border: 0px;">
		<div class="row">
			<div class="col-md-12">
				<form class="form-inline" id="searchForm" name="searchForm" role="form">
					<div class="row">
						<div class="form-group">
							<label for="searchDeptId" class="control-label">部门：</label>
							<select class="form-control" id="searchDeptId" name="deptId" tabindex="1"
								data-toggle="popover" title="请选择部门">
								<option value="" selected>全部</option>
							</select>
						</div>
						&nbsp; &nbsp;&nbsp; &nbsp;
						<div class="form-group">
							<label for="searchJobId" class="control-label">职务：</label>
							<select class="form-control" id="searchJobId" name="jobId" tabindex="2"
								data-toggle="popover" title="请选择职务">
								<option value="" selected>全部</option>
							</select>
						</div>
						&nbsp; &nbsp;&nbsp; &nbsp;
						<div class="form-group">
							<label for="searchWorkstateId" class="control-label">工作状态：</label>
							<select class="form-control" id="searchWorkstateId" name="workstateId" tabindex="3"
								data-toggle="popover" title="请选择工作状态">
								<option value="" selected>全部</option>
							</select>
						</div>
					</div>
					<br>
					<div class="row">
						<div class="form-group">
							<label for="searchCode" class="control-label">工号：</label>
							<input class="form-control" type="text" id="searchCode" name="code" maxlength="20"
								tabindex="4" data-toggle="popover" title="工号必须是英文或数字">
						</div>
						&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
						<div class="form-group">
							<label for="searchName" class="control-label">姓名：</label>
							<input class="form-control" type="text" id="searchName" name="name" maxlength="50"
								tabindex="5" data-toggle="popover" title="姓名可以是中文英文或数字" />
						</div>
					</div>
					<br>
					<div class="row">
						<div id="tb_search">
							<button class="search-btn" tabindex="7" onclick="loadTableData();"></button>
							<button class="add-btn" tabindex="8" onclick="initForm($('#frmEdit'),true)"></button>
							<button class="reset-btn" tabindex="9"
								onclick="$('#searchForm')[0].reset();loadTableData();"></button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<!-- 表格数据信息 -->
				<table id="tableData" data-toggle="table" data-toolbar="#tb_search"
					class="table table-striped table-bordered table-hover">
				</table>
			</div>
		</div>
	</div>

	<!-- 信息编辑模态框（Modal） -->
	<div class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content" style="width: 800px;">
				<div class="modal-header">
					<span class="close" data-dismiss="modal"><img src="images/close_btn.png" /></span>
					<h4 class="modal-title" align="left">修改用户信息</h4>
				</div>
				<div class="modal-body">
					<form id="frmEdit" name="frmEdit" class="form-horizontal" role="form" type="">
						<input type="hidden" class="form-control" id="editId" name="id" value="">
						<div class="row">
							<div class="col-sm-6 form-group">
								<label for="editCode" class="col-sm-4 control-label text-danger">工号:</label>
								<div class="col-sm-6">
									<input type="text" class="form-control" id="editCode" name="code" maxlength="20"
										tabindex="11" data-toggle="popover" placeholder="请输入工号"
										title="工号必须由英文或数字组成(限制20个字符)" required data-bv-container="#err_editCode"
										pattern="^[A-Za-z0-9]{0,20}$">
								</div>
								<div id="err_editCode"></div>
							</div>
							<div class="col-sm-6 form-group">
								<label for="editName" class="col-sm-4 control-label text-danger">姓名:</label>
								<div class="col-sm-6">
									<input type="text" class="form-control" id="editName" name="name" maxlength="50"
										tabindex="12" data-toggle="popover" placeholder="请输入姓名" title="不能超过50个字符"
										required data-bv-container="#err_editName">
								</div>
								<div id="err_editName"></div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-6 form-group">
								<label for="editDeptId" class="col-sm-4 control-label">部门:</label>
								<div class="col-sm-7">
									<select class="form-control" id="editDeptId" name="deptId" tabindex="13"
										data-toggle="popover" title="请选择部门">
									</select>
								</div>
							</div>
							<div class="col-sm-6 form-group">
								<label for="editJobId" class="col-sm-4 control-label">职务:</label>
								<div class="col-sm-7">
									<select class="form-control" id="editJobId" name="jobId" tabindex="14"
										data-toggle="popover" title="请选择职务">
									</select>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-6 form-group">
								<label for="editBirthday" class="col-sm-4 control-label text-danger">出生日期:</label>
								<div class="col-sm-8">
									<div class="input-group date">
										<input type="text" class="form-control" id="editBirthday" name="birthday"
											readonly tabindex="15" data-toggle="popover" title="出生日期" required
											data-bv-container="#err_editBirthday" />
										<span class="input-group-addon">
											<span class="glyphicon glyphicon-calendar"></span>
										</span>
									</div>
									<div id="err_editBirthday"></div>
								</div>
							</div>
							<div class="col-sm-6 form-group">
								<label for="editWorkstateId" class="col-sm-4 control-label">工作状态:</label>
								<div class="col-sm-6">
									<select class="form-control" id="editWorkstateId" name="workstateId" tabindex="16"
										data-toggle="popover" title="请选择工作状态">
									</select>
								</div>
							</div>							
						</div>
						<div class="row">
							<div class="col-sm-6 form-group">
								<label for="editGender" class="col-sm-4 control-label">性别:</label>
								<div class="col-sm-6">
									<div class="btn-group" id="editGender" data-toggle="buttons" title="请选择性别">
										<label class="btn btn-default">
											<input type="radio" name="gender" value="1" tabindex="19"> 男
										</label>
										<label class="btn btn-default">
											<input type="radio" name="gender" value="2" tabindex="19"> 女
										</label>
									</div>
								</div>
							</div>
							<div class="col-sm-6 form-group">
								<label for="editSfzh" class="col-sm-4 control-label text-danger">身份证号:</label>
								<div class="col-sm-7">
									<input type="text" class="form-control" id="editSfzh" name="sfzh" maxlength="18"
										tabindex="18" data-toggle="popover" placeholder="" title="身份证号" required
										data-bv-container="#err_editSfzh">
								</div>
								<div id="err_editSfzh"></div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-6 form-group">
								<label for="editEmail" class="col-sm-4 control-label">邮箱:</label>
								<div class="col-sm-7">
									<input type="text" class="form-control" id="editEmail" name="email" maxlength="50"
										tabindex="21" data-toggle="popover" placeholder="" title="邮箱">
								</div>
							</div>
							<div class="col-sm-6 form-group">
								<label for="editPhone" class="col-sm-4 control-label">电话:</label>
								<div class="col-sm-7">
									<input type="text" class="form-control" id="editPhone" name="phone" maxlength="50"
										tabindex="24" data-toggle="popover" placeholder="" title="电话">
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-12 form-group">
								<label for="editLoves" class="col-sm-2 control-label">爱好:</label>
								<div class="col-sm-9">
									<div class="btn-group" id="editLoves">
										<label class="btn btn-default">
											<input type="checkbox" name="loves" value="%s" tabindex="16" /> %s
										</label>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-12 form-group">
								<label for="editPhoto" class="col-sm-2 control-label">照片:</label>
								<div class="col-sm-8">
									<input type="file" id="editPhoto" name="photo" title="选择照片" tabindex="25" 
									data-bv-file accept="image/png,image/jpeg,image/jpg" data-bv-file-extension="png,jpg,jpeg" 
									data-bv-file-minsize="10240" data-bv-file-maxsize="512000" data-bv-container="#err_editPhoto" />
								</div>
								<div id="err_editPhoto"></div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-12 form-group">
								<div class="col-sm-9 col-sm-offset-2">
									<img  id="imgEditPhoto" class="img-responsive img-photo" src="" />
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-12 form-group">
								<label for="editDescr" class="col-sm-2 control-label">备注:</label>
								<div class="col-sm-9">
									<textarea rows="4" class="form-control" id="editDescr" name="descr"
										maxlength="200" tabindex="25" data-toggle="popover" placeholder="请输入备注(200字以内)"
										title="对于用户的简要说明(200字以内)"></textarea>
								</div>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button class="modal-save-btn" tabindex="30"
						onclick="submitForm($('#frmEdit'),$('#editId').val())"></button>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<button class="modal-reset-btn" tabindex="31"
						onclick="initForm($('#frmEdit'),false,$('#editId').val())"></button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>

	<!-- 信息查看模态框（Modal） -->
	<div class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content" style="width: 700px;">
				<div class="modal-header">
					<span class="close" data-dismiss="modal"><img src="images/close_btn.png" /></span>
					<h4 class="modal-title">查看用户信息</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="frmView" name="frmView" role="form">
						<div class="row form-group">
							<label class="col-sm-2 control-label">工号:</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" name="code" readonly>
							</div>
							<label class="col-sm-2 control-label">姓名:</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" name="name" readonly>
							</div>
						</div>
						<div class="row form-group">
							<label class="col-sm-2 control-label">部门:</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" name="deptName" readonly>
							</div>
							<label class="col-sm-2 control-label">职务:</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" name="jobName" readonly>
							</div>
						</div>
						<div class="row form-group">
							<label class="col-sm-2 control-label">出生日期:</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" name="birthday" readonly>
							</div>
							<label class="col-sm-2 control-label">在职:</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" name="workstateName" readonly>
							</div>
						</div>
						<div class="row form-group">
							<label class="col-sm-2 control-label">性别:</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" name="gender" readonly>
							</div>
							<label class="col-sm-2 control-label">身份证号:</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" name="sfzh" readonly>
							</div>
						</div>
						<div class="row form-group">
							<label class="col-sm-2 control-label">邮箱:</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" name="email" readonly>
							</div>
							<label class="col-sm-2 control-label">电话:</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" name="phone" readonly>
							</div>
						</div>
						<div class="row form-group">
							<label class="col-sm-2 control-label">爱好:</label>
							<div class="col-sm-9">
								<div class="btn-group" id="viewLoves">
									<label class="btn btn-default">
										<input type="checkbox" name="loves" value="%s" tabindex="16" disabled> %s
									</label>
								</div>
							</div>
						</div>
						<div class="row form-group">
							<label class="col-sm-2 control-label">照片:</label>
							<div class="col-sm-9">
								<div class="btn-group">
									<img id="imgViewPhoto" class="img-responsive img-photo" src="">
								</div>
							</div>
						</div>
						<div class="row form-group">
							<label class="col-sm-2 control-label">备注:</label>
							<div class="col-sm-9">
								<textarea rows="2" class="form-control" name="descr" readonly></textarea>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button class="btn-primary" data-dismiss="modal">关 闭</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
	<!-- 修改密码模态框（Modal） -->
	<div class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content" style="width: 600px;">
				<div class="modal-header">
					<span class="close" data-dismiss="modal"><img src="images/close_btn.png" /></span>
					<h4 class="modal-title" align="left">修改密码</h4>
				</div>
				<div class="modal-body">
					<form id="frmPwd" name="frmPwd" class="form-horizontal" role="form">
						<input type="hidden" class="form-control" id="pwdId" name="id" value="">
						<div class="row form-group">
							<label class="col-sm-3 control-label">工号:</label>
							<div class="col-sm-5">
								<input type="text" class="form-control" name="code" readonly>
							</div>
						</div>
						<div class="row form-group">
							<label class="col-sm-3 control-label">姓名:</label>
							<div class="col-sm-5">
								<input type="text" class="form-control" name="name" readonly>
							</div>
						</div>
						<div class="row form-group">
							<label for="pwdPassword" class="col-sm-3 control-label text-danger">新密码:</label>
							<div class="col-sm-5">
								<input type="password" class="form-control" id="pwdPassword" name="password"
									minlength="6" maxlength="20" tabindex="41" data-toggle="popover" placeholder="请输入新密码"
									title="请输入新密码" required data-bv-container="#err_pwdPassword"
									data-bv-identical data-bv-identical-field="confirmPassword" data-bv-identical-message="两次输入密码不一样"
									>
							</div>
							<div id="err_pwdPassword"></div>
						</div>
						<div class="row form-group">
							<label for="pwdConfirmPassword" class="col-sm-3 control-label text-danger">确认新密码:</label>
							<div class="col-sm-5">
								<input type="password" class="form-control" id="pwdConfirmPassword" name="confirmPassword"
									minlength="6" maxlength="20" tabindex="41" data-toggle="popover" placeholder="请输入新密码"
									title="请输入确认密码" required data-bv-container="#err_pwdConfirmPassword"
									data-bv-identical data-bv-identical-field="password" data-bv-identical-message="两次输入密码不一样"
									>
							</div>
							<div id="err_pwdConfirmPassword"></div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button class="modal-save-btn" tabindex="48"
						onclick="submitPwdForm($('#frmPwd'))"></button>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<button class="modal-reset-btn" tabindex="49"
						onclick="initPwdForm($('#frmPwd'),false,$('#pwdId').val())"></button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>

</body>

</html>